<!--
  用css做的颜色三角分割正方形块
-->
<template>
  <div
    class="color-block"
    :style="boxStyle"
  >
    <div
      v-if="coverIsShow"
      class="cover"
    ></div>
    <div
      v-if="colors.length"
      class="block"
      :style="blockStyle"
    ></div>
    <div
      v-if="type === 'new'"
      class="new"
    >
      <el-icon><Plus /></el-icon>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    type: String, // 'new' 新增按钮
    colors: {
      type: Array,
      default: () => [],
    },
    size: {

      // 宽高
      type: Number,
      default: 20,
    },
  },
  data() {
    return {};
  },
  computed: {
    boxStyle() {
      return {
        width: `${this.size}px`,
        height: `${this.size}px`,
      };
    },
    blockStyle() {
      let firstColor = '#fff';
      let lastColor = '#fff';
      const { size } = this;
      const { colors } = this;
      const len = colors.length;
      if (len) {
        if (typeof colors[0] === 'string') {
          firstColor = colors[0];
          lastColor = colors[len - 1];
        } else {
          firstColor = colors[0][0];
          lastColor = colors[len - 1][0];
        }
      }

      return {
        borderLeft: `${size}px solid ${firstColor}`,
        borderBottom: `${size}px solid ${lastColor}`,
        width: `${size * 2}px`,
        height: `${size * 2}px`,
      };
    },
    coverIsShow() {
      const len = this.colors.length;
      if (!len) {
        return false;
      }
      const color = this.colors[0];
      if (typeof color === 'string') {
        return false;
      }
      return true;
    },
  },
  watch: {},
  methods: {},
};
</script>
<style lang="less" scoped>
.color-block {
  overflow: hidden;
  position: relative;
  .cover {
    position: absolute;
    z-index: 10;
    background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0),
      rgba(255, 255, 255, 0.5)
    );
    width: 100%;
    height: 100%;
  }
  .block {
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .new {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 12px;
    background-color: white;
    box-sizing: border-box;
  }
}
</style>
